<!-- 图文导航 -->
<template>
	<view class="craphic-nav" :style="{ paddingBottom: padBottom + 'rpx', paddingTop: padTop + 'rpx' }"
		:class="navList.length > 5 ? 'df' : 'df-cen-sa'">
		<view v-for="(item, inx) in navList" :key="inx" @click="toClassify(item.title, item)"
			class="nav-item df-col-cen">
			<image :src="$Utils.img(item.imageUrl)" :style="{ width: imgSize + 'rpx', height: imgSize + 'rpx' }"
				:class="[num==inx? 'iconAmni':'']">
			</image>
			<view class="line-text nav-title df-cen">{{ item.title }}</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'craphic-nav',
		data() {
			return {
				num: null
			};
		},
		props: {
			navList: {
				type: Array,
				default: () => {
					return [];
				}
			},
			imgSize: {
				type: [Number, String],
				default: 70
			},
			padBottom: {
				type: [Number, String],
				default: 0
			},
			padTop: {
				type: [Number, String],
				default: 0
			}
		},
		onShow() {

		},
		methods: {
			// 跳转
			toClassify(title, val) {
				this.$Utils.jumpCustom(val);
			},
		},
		onUnload(){
			clearInterval(timernum)
		},
		mounted() {
			let num = null
			num = Math.round(Math.random() * this.navList.length)
			this.num = num
			let timernum = setInterval(()=>{
				let num = null
				num = Math.round(Math.random() * this.navList.length)
				this.num = num
			},8000)
		}
	};
</script>

<style lang="scss">
	.craphic-nav {
		flex-wrap: wrap;

		.nav-item {
			padding: 0 10rpx;
			width: 150rpx;
			margin-bottom: 20rpx;
		}

		.nav-title {
			width: 100%;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #222222;
		}
	}

	.iconAmni {
		animation: myfirst 2s infinite;
	}

	@keyframes myfirst {

		0%,
		65% {
			transform: rotate(0deg);
		}

		70% {
			transform: rotate(10deg);
		}

		75% {
			transform: rotate(-10deg);
		}

		80% {
			transform: rotate(10deg);
		}

		85% {
			transform: rotate(-10deg);
		}

		90% {
			transform: rotate(10deg);
		}

		95% {
			transform: rotate(-10deg);
		}

		100% {
			transform: rotate(0deg);
		}
	}
</style>
